<template>
  <div class="app-container">
    <set-tool :type.sync="type" :selected.sync="selected" :options="type ? courseOptions : classifyOptions" @new="handleNew" />
    <set-display :list="list" @edit="handleEdit" />
    <page :current.sync="current" :size="size" :total="total" />
    <set-detail
      :visible="visible"
      :course-options="courseOptions"
      :classify-options="classifyOptions"
      :data="form"
      @cancel="handleCancel"
      @confirm="handleConfirm"
    />
  </div>
</template>

<script>
import Page from '@/views/components/Page'
import SetTool from '@/views/components/SetTool'
import SetDetail from '@/views/components/SetDetail'
import SetDisplay from '@/views/components/SetDisplay'
import { list_classify, list_course, page, query, save_update } from '@/api/set'

export default {
  name: 'ReviewSet',
  components: { SetDisplay, SetDetail, SetTool, Page },
  data() {
    return {
      current: 1,
      size: 10,
      total: 0,
      list: [],
      type: true,
      selected: '',
      courseOptions: [],
      classifyOptions: [],
      visible: false,
      detailOptions: [],
      form: {}
    }
  },
  computed: {},
  watch: {
    current: {
      immediate: true,
      handler(newVal) {
        this.current = newVal
        this.handleCommon()
      }
    },
    selected: {
      handler(newVal) {
        if (newVal === '') {
          this.handleCommon()
          return
        }
        if (this.type) {
          this.handleCommon({ s_uid: newVal })
        } else {
          this.handleCommon({ c_uid: newVal })
        }
      }
    }
  },
  created() {
    this.handleSelector()
  },
  methods: {
    handleCommon(params) {
      page({ current: this.current, size: this.size, params }).then(res => {
        const { code, data } = res
        if (code === 20000) {
          this.total = data.total
          this.list = data.records
        }
      }).catch(err => this.$message.error(err))
    },
    handleSelector() {
      list_course().then(res => {
        const { code, data } = res
        if (code === 20000) {
          this.courseOptions = data
        }
      }).catch(err => this.$message.error(err))
      list_classify().then(res => {
        const { code, data } = res
        if (code === 20000) {
          this.classifyOptions = data
        }
      }).catch(err => this.$message.error(err))
    },
    handleChange(flag) {
      this.flag = flag
    },
    handleNew() {
      this.visible = true
    },
    handleEdit(row) {
      this.visible = true
      query(row.uid).then(res => {
        const { code, msg, data } = res
        if (code === 20000) {
          this.form = data
        } else {
          this.$message.error(msg)
        }
      }).catch(err => this.$message.error(err))
    },
    handleCancel() {
      this.visible = false
    },
    handleConfirm(form) {
      save_update(form).then(res => {
        const { code, msg } = res
        if (code === 20000) {
          this.$message.success(msg)
          this.visible = false
          this.handleCommon()
        } else {
          this.$message.error(msg)
        }
      }).catch(err => this.$message.error(err))
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  .roles-table {
    margin-top: 30px;
  }

  .permission-tree {
    margin-bottom: 30px;
  }
}
</style>
